{% extends 'posts.html' %}
{#{% import '_pagination.html' as pagination %}#}
{% block content %}
    <div class="layui-col-md8">
        {% if is_index %}
            <div class="fly-panel">
                <div class="fly-panel-title fly-filter">
                    <a>置顶</a>
                    <a href="#signin" class="layui-hide-sm layui-show-xs-block fly-right" id="LAY_goSignin"
                       style="color: #FF5722;">去签到</a>
                </div>
                <ul class="fly-list">
                    {% for item in top_list %}
                        {% with item_user=item.creator item_catalog=item.catalog %}
                            {% include '_list_item.html' %}
                        {% endwith %}
                    {% empty %}
                        <div style="min-height: 60px; text-align: center; padding-top:50px; color: #999;">没有相关数据</div>
                    {% endfor %}
                </ul>
            </div>
        {% endif %}


        <div class="fly-panel" style="margin-bottom: 0;">
            <div class="fly-panel-title fly-filter">
                <a href="#" data-type="none">综合</a>
                <span class="fly-mid"></span>
                <a href="#" data-type="not_closed">未结</a>
                <span class="fly-mid"></span>
                <a href="#" data-type="is_closed">已结</a>
                <span class="fly-mid"></span>
                <a href="#" data-type="is_cream">精华</a>
                <span class="fly-filter-right layui-hide-xs">
                <a href="#" data-sort="created">按最新</a>
                <span class="fly-mid"></span>
                <a href="#" data-sort="hot">按热议</a>
                </span>
            </div>

            <ul class="fly-list">
                {% for item in posts %}
                    {% with item_user=item.creator item_catalog=item.catalog %}
                        {% include '_list_item.html' %}
                    {% endwith %}
                {% empty %}
                    <div style="min-height: 60px; text-align: center; padding-top:50px; color: #999;">没有相关数据</div>
                {% endfor %}
            </ul>
            {% if page_range|length > 1 %}
                {% with queryset=posts %}
                    {% include 'paginator_nav.html' %}
                {% endwith %}
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block other_js %}
    {{ block.super }}
    <script>
        var queryConfig = getQueryString();
        $("a[data-type]").each(function (index) {
            let toType = $(this).data("type");

            // 设置当前查看方式的样式
            if (!queryConfig.type && index === 0) {
                $(this).addClass("layui-this");
                return;
            } else if (queryConfig.type === toType) {
                $(this).addClass("layui-this");
                return;
            }

            // 动态设置query string url
            let newQueryConfig = extendObject(queryConfig, {type: toType});
            // 去除page参数
            delete newQueryConfig.page;
            $(this).attr('href', "?" + setQueryString(newQueryConfig));
        });
        $("a[data-sort]").each(function (index) {
            let toSort = $(this).data("sort");

            // 设置当前查看方式的样式
            if (!queryConfig.sort && index === 0) {
                $(this).addClass("layui-this");
                return;
            } else if (queryConfig.sort === toSort) {
                $(this).addClass("layui-this");
                return;
            }

            // 动态设置query string url
            let newQueryConfig = extendObject(queryConfig, {sort: toSort});
            // 去除page参数
            delete newQueryConfig.page;
            $(this).attr('href', "?" + setQueryString(newQueryConfig));
        });
    </script>
{% endblock %}
